<template>
  <div>
    <nav-bar title="通讯录">
    </nav-bar>
    <div class="maxinBox">
      <form action="/">
        <van-search
          v-model="nickname"
          show-action
          placeholder="请输入联系人姓名"
          @search="getAddressBookList"
        />
      </form>
      <van-row v-for="(itemData, index) in personListByNameList" :key="index" class="addressBook backgroundfff" v-show="nickname" style="border-bottom: 0.0625rem solid #E6E6E6;padding: 0.9375rem;">
        <van-col :span="12">
          <span style="background: #1577FF;border-radius: 50%;color: #fff;padding: 0.5rem 0.625rem;">{{itemData.name.substr(0, 1)}}</span>
          <span>{{itemData.name}}</span>
        </van-col>
        <van-col :span="12" style="text-align: right;">
          <svg-icon icon-class="copy" style="font-size: 1.5rem;" @click.native="onCopy(itemData)" />
          <svg-icon icon-class="telephone" style="font-size: 1.5rem;" v-if="itemData.landLine" @click.native="onCopy(itemData)" />
          <a :href="`tel:${itemData.phone}`" style="color: #666;" v-else>
            <svg-icon icon-class="telephone" style="font-size: 1.5rem;" />
          </a>
        </van-col>
      </van-row>
      <van-collapse v-model="activeName" accordion v-show="!nickname">
        <van-collapse-item :title="addressBookList && addressBookList.builderDeptName" name="1" :icon="department">
          <van-collapse v-model="activeNames" accordion v-if="addressBookList && addressBookList.builderContactVoList.length">
            <van-collapse-item v-for="(item, index) in addressBookList.builderContactVoList" :key="index" :title="item.nodeName" :name="item.index" :icon="teamClass">
              <van-row v-for="(itemData, index) in item.userVos" :key="index" class="addressBook">
                <van-col :span="12">
                  <span style="background: #1577FF;border-radius: 50%;color: #fff;padding: 0.5rem 0.625rem;">{{itemData.name.substr(0, 1)}}</span>
                  <span :style="itemData.monitor? 'color: #1577ff;': 'color: block'">{{itemData.name}}</span>
                </van-col>
                <van-col :span="12" style="text-align: right;">
                  <svg-icon icon-class="copy" style="font-size: 1.5rem;" @click.native="onCopy(itemData)" />
                  <svg-icon icon-class="telephone" style="font-size: 1.5rem;" v-if="itemData.landLine" @click.native="onCopy(itemData)" />
                  <a :href="`tel:${itemData.phone}`" style="color: #666;" v-else>
                    <svg-icon icon-class="telephone" style="font-size: 1.5rem;" />
                  </a>
                </van-col>
              </van-row>
            </van-collapse-item>
          </van-collapse>
        </van-collapse-item>
      </van-collapse>

      <van-collapse v-model="activeName1" accordion v-show="!nickname" v-if="addressBookEnterpriseList">
        <van-collapse-item :title="addressBookEnterpriseList && addressBookEnterpriseList.name" name="1" :icon="department">
          <van-collapse v-model="activeNames1" accordion>
            <van-collapse-item v-for="(item, index) in addressBookEnterpriseList.children" :key="index" :title="item.name" :name="item.index" :icon="teamClass">
              <van-collapse v-model="activeNames2" accordion>
                <van-collapse-item v-for="(item, index) in item.children" :key="index" :title="item.name" :name="item.index" :icon="teamClass">
                   <van-row v-for="(itemData, index) in item.userVos" :key="index" class="addressBook">
                    <van-col :span="12">
                      <span style="background: #1577FF;border-radius: 50%;color: #fff;padding: 0.5rem 0.625rem;">{{itemData.name.substr(0, 1)}}</span>
                      <span>{{itemData.name}}</span>
                    </van-col>
                    <van-col :span="12" style="text-align: right;">
                      <svg-icon icon-class="copy" style="font-size: 1.5rem;" @click.native="onCopy(itemData)" />
                      <svg-icon icon-class="telephone" style="font-size: 1.5rem;" v-if="itemData.landLine" @click.native="onCopy(itemData)" />
                      <a :href="`tel:${itemData.phone}`" style="color: #666;" v-else>
                        <svg-icon icon-class="telephone" style="font-size: 1.5rem;" />
                      </a>
                    </van-col>
                  </van-row>
                </van-collapse-item>
              </van-collapse>
              <van-row v-for="(itemData, index) in item.userVos" :key="index" class="addressBook">
                <van-col :span="12">
                  <span style="background: #1577FF;border-radius: 50%;color: #fff;padding: 0.5rem 0.625rem;">{{itemData.name.substr(0, 1)}}</span>
                  <span>{{itemData.name}}</span>
                </van-col>
                <van-col :span="12" style="text-align: right;">
                  <svg-icon icon-class="copy" style="font-size: 1.5rem;" @click.native="onCopy(itemData)" />
                  <svg-icon icon-class="telephone" style="font-size: 1.5rem;" v-if="itemData.landLine" @click.native="onCopy(itemData)" />
                  <a :href="`tel:${itemData.phone}`" style="color: #666;" v-else>
                    <svg-icon icon-class="telephone" style="font-size: 1.5rem;" />
                  </a>
                </van-col>
              </van-row>
            </van-collapse-item>
          </van-collapse>
        </van-collapse-item>
      </van-collapse>

      <van-dialog
         v-model="isShow"
         show-cancel-button
         @cancel="telephoneList=[]"
      >
      <div class="addressBook">
        <van-row v-for="(item, index) in telephoneList" :key="index" style="padding: 0.625rem;">
          <van-col :span="12">
            {{item.mobile}}
          </van-col>
          <van-col :span="12" style="text-align: right;">
            <svg-icon icon-class="copy" style="font-size: 1.5rem;" @click.native="copy(item.mobile)" />
            <a :href="`tel:${item.mobile}`" style="color: #666;">
              <svg-icon icon-class="telephone" style="font-size: 1.5rem;" />
            </a>
          </van-col>
        </van-row>
      </div>
      </van-dialog>
    </div>

  </div>
</template>

<script>
  import addressAPI from '../../../api/workAPI/addressBookAPI.js'
  export default {
    data() {
      return {
        department: require('../../../assets/images/department.png'),
        teamClass: require('../../../assets/images/teamClass.png'),
        activeName: 1,
        activeNames: 0,
        activeName1: 1,
        activeNames1: 0,
        activeNames2: 0,
        telephoneList: [],
        isShow: false,
        nickname: '',
        addressBookList: null,
        personListByNameList: [],
        addressBookEnterpriseList: null
      }
    },
    methods: {
      // 通讯录
      getAddressBookList() {
        if (this.nickname) {
          addressAPI.getAddressBookByName(this.nickname).then(res => {
            this.personListByNameList = res.result
          })
        } else {
          addressAPI.getAddressBook().then(res => {
            this.addressBookList = res.builders
            this.addressBookEnterpriseList = res.employees
          })
        }
      },
      // 二级弹框复制电话
      copy(e) {
        this.$copyText(e).then(e=>{
          this.$toast('复制成功')
        }, e=> {
          this.$toast('复制失败')
        })
      },
      // 复制电话
      onCopy(data){
        if (data.landLine) {
          this.telephoneList.push({
            mobile: data.mobile
          })
          this.telephoneList.push({
            mobile: data.landLine
          })
          this.isShow = true
        } else {
          this.$copyText(data.phone).then(e=>{
            this.$toast('复制成功')
          }, e=> {
            this.$toast('复制失败')
          })
        }
      },
    },
    mounted() {
      this.getAddressBookList()
    }
  }
</script>

<style scoped lang="scss">
  .addressBook{
    line-height: 1.875rem;
    padding: 0.625rem;
  }
  .diff{
    padding-left: 2.5rem;
  }
  .organization{
    padding: 2 * $spacing;
    text-align: right;
    background-color: $color;
    line-height: 2.5rem;
  }
</style>
